<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .first {
            margin: 50px 400px;
        }

        select {
            width: 150px;
            height: 30px;
            outline: none;
            margin-left: 50px;
            border: 1px solid #e38a0e;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="first">
            <select class="province" v-model="pname">
                <option v-for="(item,index) in list" :key="index">
                    {{item}}
            </select>
            <select class="city" v-model="cname">
                <option v-for="(item,index) in list1" :key="index">
                    {{item}}
            </select>
            <select class="district" v-model="dname">
                <option v-for="(item,index) in list2" :key="index">
                    {{item}}
            </select>

        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    list: [],
                    list1: [],
                    list2: [],
                    pname: '江西省',
                    cname: '赣州市',
                    dname: '信丰县'
                }
            },
            created() {

                this.getdata();
            },

            methods: {
                getdata: async function () {
                    try {
                        let res = await axios({ url: 'http://hmajax.itheima.net/api/province' })
                        this.list = res.data.list;
                        let res1 = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname: this.pname } });
                        this.list1 = res1.data.list;
                        let res2 = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname: this.pname, cname: this.cname } });
                        this.list2 = res2.data.list;
                    } catch (error) {
                        console.error('请求出错:', error);
                    }
                }
            },
            watch: {
                pname: {
                    //immediate: true, // 页面加载时立即触发一次
                    handler(newVal) {
                        // 当 pname 改变时，发送新的请求
                        axios({
                            url: 'http://hmajax.itheima.net/api/city',
                            method: 'get',
                            params: {
                                pname: newVal
                            }
                        }).then(res => {
                            this.cname = res.data.list[0];
                            this.list1 = res.data.list;
                        }).catch(error => {
                            console.error('请求出错:', error);
                        });
                    }
                },
                cname: {
                    //  immediate: true, // 页面加载时立即触发一次
                    handler(newVal) {
                        // 当 cname 改变时，发送新的请求
                        axios({
                            url: 'http://hmajax.itheima.net/api/area',
                            method: 'get',
                            params: {
                                pname: this.pname,
                                cname: newVal
                            }
                        }).then(res => {
                            this.dname = res.data.list[0];
                            this.list2 = res.data.list;
                        }).catch(error => {
                            console.error('请求出错:', error);
                        });
                    }
                }
            }
        }).mount('#app')
    </script>
</body>

</html>